<template>
  <div style="margin: 20px">
    <el-input
        v-model="filterText"
        style="width: 240px"
        placeholder="请输入检索关键字"
    />
    <!--  ref="treeRef" 相当于给el-tree标签 定义一个id  -->
    <el-tree
        ref="treeRef"
        style="max-width: 600px"
        :data="cates"
        :props="defaultProps"
        :default-expand-all="true"
        :filter-node-method="filterNode"
    />
  </div>
</template>

<script setup>
//@是 src目录的别名  vite.config.js中定义的
import { listCatesTree } from '@/api/product/category.js'
import {ref , onMounted ,watch} from 'vue';
//1、前端页面中 引入树形控件
//后端返回的数据格式如果和 data的结构一样,前端直接可以渲染数据到树形控件中！
const cates = ref([])
//页面渲染时 执行页面数据的加载
onMounted(()=>{
  initData()
})
//加载页面数据的函数
async function initData(){
  //解构得到的data代表 R对象的 data属性值，也就是后端响应的 列表数据
  const { data } = await listCatesTree()
  // console.log(data)
  cates.value = data;
}

const defaultProps = {
  children: 'children', //使用数据的哪个树形当作它的子节点
  label: 'name', //使用数据的哪个树形当作标题展示
}
const treeRef = ref()//定义一个变量 将来绑定页面中的一个标签(ref="treeRef")
//树形控件过滤
const filterText = ref('')
//过滤节点函数： false表示不显示节点  true表示显示节点
const filterNode = (value, data) => {
  if (!value) return true
  //data表示根据关键字过滤的 节点
  return data.name.includes(value)  //判断每个节点的name属性值是否包含value，如果包含返回true
}


//监视filterText属性，当属性值改变时，参数2函数会被回调
watch(filterText, (val) => {
  //获取页面中的treeRef的标签 ， 调用标签的filter方法(el-tree 调用filter时会自动执行filter-node-method绑定的方法 )
  treeRef.value.filter(val)
})
/*
*   1、当在input输入框输入内容后
*       filterText可以接收到最新的内容(双向绑定)
*   2、watch对filterText进行了监视，当filterText内容改变，watch的回调方法会执行
*       并传入了filterText最新的值
*   3、watch的回调方法中
*     通过el-tree 的ref绑定的变量获取到el-tree控件 对象
*     调用el-tree的filter方法 传入filterText最新的值
*   4、el-tree的filter方法执行就是调用filter-node-method="filterNode"
*   5、filterNode执行了
*       它可以接收到el-tree传入的 filterText最新的值  和每个节点json对象
*       如果filterNode返回false，隐藏节点
*       返回true 显示节点
*
* */
</script>

<style scoped>

</style>